<!DOCTYPE html>
<html lang="en" class="page-fill" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>员工列表--快递物流系统</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all"/>
</head>
<body>
<blockquote class="layui-elem-quote quoteBox">
    <form class="layui-form" lay-filter="searchForm">>
        <div class="layui-inline">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="name"
                           placeholder="请输入姓名"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">员工编号</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" name="staffId"
                           placeholder="请输入员工编号"/>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-inline">
                    <select name="affiliatedNetworkId">
                        <option value="0">请选择网点</option>

                    </select>
                </div>
            </div>
            <button type="submit" class="layui-btn search_btn" lay-submit="" lay-filter="search">搜索</button>
            <a class="layui-btn layui-btn-normal delAll_btn">删除</a>
            <!--  				<a class="layui-btn layui-btn-normal search_btn">搜索</a>
             -->
        </div>
        <div class="layui-inline">
            <a class="layui-btn layui-btn-normal addEmp_btn">添加员工</a>
        </div>

    </form>
</blockquote>

<table id="empList" lay-filter="empList"></table>

<!--操作-->
<script type="text/html" id="employeeListBar">
    <a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
    <button class="layui-btn layui-btn-xs layui-btn-danger delAll_btn" lay-event="del">删除</button>
</script>


<script type="text/javascript" th:src="@{/lib/layui/layui.js}"></script>
<script th:inline="none">
    layui.use(['table', 'layer', 'jquery', 'form'], function () {
        table = layui.table;
        layer = parent.layer === undefined ? layui.layer : top.layer;
        $ = layui.jquery;
        form = layui.form;


        //员工表的数据渲染
        tableIns = table.render({
            elem: '#empList'
            , height: 300
            , id: 'empListTable'
            , url: '/api/emp/list' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {
                    title: "全选",
                    width: 80,
                    type: "checkbox",
                    fixed: 'left'
                }
                , {field: 'staffId', title: '序号', width: 150, sort: true, fixed: 'left'}
                , {
                    field: 'loginAccount', title: '登录账号', width: 150, templet: function (d) {
                        return d.sysStaff.loginAccount;
                    }
                }
                , {
                    title: '所属网点', width: 140, sort: true, templet: function (d) {
                        return d.sysStaff.affiliatedNetworkId;
                    }
                }
                , {
                    title: '姓名', width: 120, templet: function (d) {
                        return d.sysStaff.name;
                    }
                }
                , {field: 'cellphone', title: '手机', width: 130}
                , {field: 'telephone', title: '座机', width: 130}
                , {
                    title: "操作",
                    fixed: 'right',
                    width: 200,
                    align: 'center',
                    toolbar: '#employeeListBar'
                }

            ]]
        });


        //添加员工事件
        $(".addEmp_btn").click(function () {
            addEmp();
        });


        function addEmp(edit) {
            var op = "";
            var id = ""
            if (edit == undefined || edit == null) {
                op = "新增";
                params = "addEmp";

            } else {
                op = "编辑";
                params = "updateEmp";
                id = "/" + edit.staffId;
            }

            var index = layui.layer.open({
                title: op + "员工",
                type: 2,
                area: ['820px', '600px'],
                content: "/page/" + params + id,

            })

            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize", function () {
                //layui.layer.full(index);
            })
        }


        //根据员工号，姓名，网点 查询员工信息
        form.on('submit(search)', function (data) {

            var params = JSON.stringify(data.field);
            tableIns.reload({

                where: data.field

            });


            return false;
        });

        //监听行工具栏事件
        table.on('tool(empList)', function (obj) {
            var layEvent = obj.event,
                data = obj.data;

            if (layEvent === 'edit') { //编辑
                alert(JSON.stringify(data))
                addEmp(data);

            } else if (layEvent === 'del') { //删除
                layer.confirm('确定删除该用户信息？', {icon: 3, title: '提示信息'}, function (index) {

                    $.get("/api/emp/delete", {
                        staff_ids: data.staffId  //将需要删除的员工编号作为参数传入
                    }, function (data) {
                        if (data.code == 200) {
                            tableIns.reload(); //刷新表格数据（也即让table重新加载url）
                            layer.close(index);//关闭弹出框
                        } else {
                            layer.close(index);//关闭弹出框
                            layer.msg(data.msg, {icon: 2});
                        }

                    })
                });
            } else if (layEvent === 'look') { //预览
                layer.alert("此功能需要前台展示，实际开发中传入对应的必要参数进行文章内容页面访问")
            }
        });


        //批量删除
        $(".delAll_btn").click(function () {
            var checkStatus = table.checkStatus('empListTable'),
                data = checkStatus.data,
                ids = [];
            if (data.length > 0) {
                for (var i in data) {
                    ids.push(data[i].staffId);
                }
                ids = ids.join(",");
                alert(ids);
                layer.confirm('确定删除选中的员工？', {icon: 3, title: '提示信息'}, function (index) {
                    $.post("/api/emp/delete", {
                        staff_ids: ids  //将需要删除的newsId作为参数传入
                    }, function (d) {
                        if (d.code == 200) {
                            layer.msg("删除成功", {
                                "icon": 1
                            });
                            tableIns.reload();
                        } else {
                            layer.msg(d.msg, {
                                "icon": 2
                            });
                        }
                    })
                })
            } else {
                layer.msg("请选择需要删除的用户");
            }
        })


    });
</script>

</body>
</html>